<template>
    <app-dialog v-model="show" width="600px" title="添加账号" @open="handleOpen">

        <div class="addplantuser_dialog">
            <div class="ip_list">
                <div class="item">
                    <div class="label">平台:</div>
                    <div class="value">
                        <app-select-plat :width="`100%`" :itemData="formData" :plantUserIndex="0" :options="plantList"
                            @changemap="getPlatforms()" />
                    </div>
                </div>
                <div class="item">
                    <div class="label">账号名称:</div>
                    <div class="value">
                        <el-input v-model="formData.name" style="width: 100%" placeholder="给账号起名" />
                    </div>
                </div>
                <div class="item">
                    <div class="label">账号:</div>
                    <div class="value">
                        <el-input v-model="formData.username" :disabled="types != 'create'" style="width: 100%"
                            placeholder="账号" />
                    </div>
                </div>
                <div class="item">
                    <div class="label">账号密码:</div>
                    <div class="value">
                        <el-input v-model="formData.password" style="width: 100%" placeholder="密码" />
                    </div>
                </div>
                <div class="item" v-if="formData.bc_type_id != ''">
                    <div class="label">2FA密钥:</div>
                    <div class="value">
                        <el-input v-model="formData.key_2FA" style="width: 100%" placeholder="2FA密钥" />
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <app-button @click="handleClose">取消</app-button>
            <app-button class="app-button-ptn" style="margin-left: 8px;" @click="clickSubmit()">确定</app-button>
        </template>
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

const props = defineProps({
    data: Object,
    formData2: Object
})
const types = ref('create')
const show = defineModel({ type: Boolean })
const emits = defineEmits()

const plantList = ref([])

const formData = ref({
    // 平台 id
    bc_type_id: '',
    // 平台信息
    value: {},
    // 名称
    name: '',
    // 账号
    username: '',
    // 密码
    password: '',
    // 2FA密钥
    key_2FA: ''
})

const getPlatforms = () => {
    http.get('/environment/get_platforms').then(res => {
        plantList.value = res.data.list.map(item => {
            return {
                value: item.id,
                label: item.platform_name,
                data: item
            }
        })
    })
}

const handleOpen = () => {
    console.log(props.formData2.bc_type_id);

    if (props.formData2.bc_type_id != undefined) {
        types.value = 'update'
        formData.value = JSON.parse(JSON.stringify(props.formData2))
    } else {
        types.value = 'create'
        formData.value = {
            // 平台 id
            bc_type_id: '',
            // 平台信息
            value: {},
            // 名称
            name: '',
            // 账号
            username: '',
            // 密码
            password: '',
            // 2FA密钥
            key_2FA: ''
        }
    }

    getPlatforms()


}

const handleClose = () => {
    show.value = false
}

const clickSubmit = () => {
    let body = JSON.parse(JSON.stringify(props.data.environment_data))
    body.id = props.data.id
    body.number = props.data.number
    body.name = props.data.name
    body.remark = props.data.remark ? props.data.remark : ''
    // 
    if (types.value == 'create') {
        http.post('/environment/creat_account', [formData.value]).then((res) => {

            body.user.plantUser.push(res.data[0])

            http.put('/environment/update_environment', body).then((res) => {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
                handleClose()
                emits('change2')
            })
        })


    } else {
        http.put('/environment/update_account', formData.value).then((res) => {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            handleClose()
            emits('change2')
        })

    }


}

onMounted(() => {


    handleOpen()
})
</script>

<style lang="scss" scoped>
.quoteip_dialog {
    padding: 24px;
    min-height: 150px;
    display: flex;
    flex-direction: column;



}

.ip_list {
    display: flex;
    flex-direction: column;
    padding: 16px;

    .item:not(:first-child) {
        margin-top: 16px;
    }

    .item {
        display: flex;

        .label {
            width: 100px;
            padding-right: 8px;
            height: 32px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            color: #1d2129;
        }

        .value {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .text {
                margin-top: 8px;
                color: #00000073;
                font-size: 14px;
            }

            .text2 {
                margin-top: 8px;
                color: #00000073;
                font-size: 12px;
            }
        }
    }
}

.flex {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;

}

.column_item {
    display: flex;

    .label {
        margin-right: 6px;

    }

    // .value{

    // }
}
</style>
